<template>
    <div id="app">
        <el-container style="height: 100%">
            <el-header style="padding-left: 0" v-if="$route.name !== 'login' && $route.name !== '404'">
                <VHeader v-on:listenActiveVal="listenActiveValEvent"></VHeader>
            </el-header>
            <el-container>
                <el-aside style="width: auto;overflow: hidden" v-if="$route.name !== 'login' && $route.name !== '404'">
                    <VLeft :memuListVal="memuListVal"></VLeft>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view/>
                    </el-main>
                    <!--                    <el-footer v-if="$route.name !== 'login' && $route.name !== '404'">-->
                    <!--                        <VFooter></VFooter>-->
                    <!--                    </el-footer>-->
                </el-container>
            </el-container>
        </el-container>

        <!-- <img src="./assets/logo.png"> -->
    </div>
</template>

<script>
    import VHeader from './Header'
    import VLeft from './Left'
    import VFooter from './Footer'

    export default {
        name: 'App',
        components: {
            VHeader,
            VLeft,
            VFooter,
        },
        data() {
            return {
                memuListVal: this.$store.state.user.sys_flag,
            }
        },
        methods: {
            listenActiveValEvent: function (data) {
                this.memuListVal = data
            },
        },
        created() {
        },
    }
</script>

<style>
    /* #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    } */
</style>
